<template>
  <div class="left-bottom">
    <div class="left-top-title">
      <title-top :name="name" />
    </div>
    <div class="left-time">
      <theMonn />
    </div>
    <div class="echarts-bottom">
      <div class="echarts-box" id="echarts"></div>
    </div>
  </div>
</template>
<script>
import titleTop from "../../title/title.vue";
import theMonn from "./theMoon";
export default {
  name: "left-bottom",
  components: {
    titleTop,
    theMonn,
  },
  props: {
    name: {
      type: String,
      default: () => "标题",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {
    setTimeout(() => {
      this.initChart();
    }, 100);
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  computed: {},
  mounted() {},
  methods: {
    initChart() {
      let echarts = this.$echarts;
      var attaData = [62, 52, 62, 52];
      //十六进制颜色转RBG 拼接为rgba返回
      function colorRgb(val) {
        // 16进制颜色值的正则
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 把颜色值变成小写
        var color = val.toLowerCase();
        if (reg.test(color)) {
          // 如果只有三位的值，需变成六位，如：#fff => #ffffff
          if (color.length === 4) {
            var colorNew = "#";
            for (var i = 1; i < 4; i += 1) {
              colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
            }
            color = colorNew;
          }
          // 处理六位的颜色值，转为RGB
          var colorChange = [];
          for (var i = 1; i < 7; i += 2) {
            colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
          }
          return "rgba(" + colorChange.join(",") + ",0.4)";
        } else {
          return color;
        }
      }
      //渐变底色
      var attackSourcesColor1 = ["#10274B", "#10274B", "#10274B", "red"];
      var attackSourcesColor2 = ["#7130F2", "#7130F2", "#7130F2", "#69B3F4"];

      //拼接itemStyle
      function attackSourcesDataFmt(sData) {
        var sss = [];
        sData.forEach((item, i) => {
          let itemStyle = {
            barBorderRadius: [0, 20, 20, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: attackSourcesColor1[i],
              },
              {
                offset: 1,
                color: attackSourcesColor2[i],
              },
            ]),
          };
          sss.push({
            value: item,
            itemStyle: itemStyle,
          });
        });
        return sss;
      }
      this.chart = echarts.init(document.getElementById("echarts"));
      this.chart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          borderColor: "#62FFFF",
          formatter: " {b}     {c}户",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "3%",
          left: "8%",
          right: "3%",
          bottom: "12%",
        },
        xAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                padding: [10, 0, 0, 0],
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 6,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#1D354B",
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "",
            type: "category",

            axisLine: {
              show: true,
              lineStyle: {
                color: "#1F394F",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                padding: [16, 5],
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
            data: ["1月", "2月", "3月", "4月"],
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 6,
            data: attackSourcesDataFmt(attaData),
          },
          {
            name: "2019",
            type: "bar",
            barWidth: 6,
            barGap: "-100%",
            z: 0,
            itemStyle: {
              barBorderRadius: [0, 20, 20, 0],
              color: "#2A313D",
            },

            data: [100, 100, 100, 100, 100, 100],
          },
        ],
      });
    },
    handleResize(e) {
      console.log(e, "resize");

      if (this.chart) {
        this.chart.resize();
      }
    },
  },
  destroyed() {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.left-bottom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .left-time {
  
  }
  .echarts-bottom {
    width: 100%;
    height: 100%;
    .echarts-box {
      height: 100%;
    }
  }
}
</style>
